<!-- 数据详情 -->

<template>
  <div class="assess">
    <!-- 桥梁总数 -->
    <!-- <div class="total">
          <img src="../../../../assets/images/home/schedulingPlan.png" alt="">
          <div>
              <p>桥梁总数</p>
              <span class="num">345</span>
          </div>
      </div> -->

    <div class="diy-header">
      <span class="title">分类统计</span>
      <span class="fTitle">Classified statistics</span>
    </div>
    <div id="assess1"></div>
    <div class="diy-header">
      <span class="title">技术评定</span>
      <span class="fTitle">Technical evaluation</span>
    </div>
    <div id="assess2"></div>

    <div id="assess3"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      pageSize: 14,
      currentPage: 1,
      recordsTotal: 0,
      taskName: '',
      bridgeName: '',
      dataList1: [],
      dataList2: [],
      dataList3: [],
      data: {
        area: ["A级", "B级", "C级", "D级", "E级"],
        legend: ["A级", "B级", "C级", "D级", "E级"],
        data: [
          [600, 12, 45, 63, 2]
          // [30, 30, 31, 33],
          // [32, 3, 30, 34],
          // [32, 32, 31, 34],
          // [32, 32, 3, 34],
        ],
        colors: [
          "#4C98FB",
          "#8A81F9",
          "#32D17E",
          "#F2B04F",
          "#FBE033",
          "#8CDF6C",
          "#FBD657",
          "#F56679",
          "#E07BCE",
          "#9D50E0",
          "#634FDA"
        ]
      }
    };
  },
  components: {},
  mounted() {
    this.getHomeBridgeType();
    this.getHomeQk();
    this.queryForPage()
    // window.addEventListener("resize", () => {
    //   this.CarPie.resize();
    // });
  },
  methods: {
    // 获取桥梁养护类型统计
    getHomeBridgeType() {
      this.$api.mearsuringPointSetting.getHomeBridgeType().then(res => {
        console.log("养护类型统计", res);
        this.dataList1 = res.data.data;
        this.drawPie1();
        //       window.addEventListener("resize", () => {
        //   this.CarPie.resize();
        // });
      });
    },
    // 技术评定情况
    getHomeQk() {
      this.$api.mearsuringPointSetting.getHomeQk().then(res => {
        console.log("技术评定", res);
        let data = res.data.data;
        console.log('技术评定！！！', data)
        if (data.length > 0) {
          data.map((item, key) => {
            if (item.name == "合格" || item.name == "不合格") {
              this.dataList2.push(item);
            } else {
              this.dataList3.push(item);
              let num = [];
              this.dataList3.map((item, key) => {
                num.push(item.value);
              });
              this.data.data = [num];
            }
          });

          this.drawPie2();
          this.drawPie3();
        }
      });
    },

    // YU 技术评定调用定期检查的数据
    queryForPage(pageIndex) {
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        data: {
          name: '',
          bridgeName: '',
        },
      }
      this.$api.insp.queryAll(_params).then((response) => {
        if (response.data.success) {
          let data = response.data.data || []
          console.log(data, '这个接口被调用了！！！！！！')
          data.map(item => {
            if(item.maintenanceType == "0") {
              if (item.level == "合格" || item.level == "不合格") {
                this.dataList2.push(item);
              }
            }
          })
          // this.tableData = response.data.data || []
          // this.recordsTotal = response.data.recordsTotal
        }
      })
    },

    drawPie1() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById("assess1"));
      // 绘制图表
      this.CarPie.setOption({
        backgroundColor: "rgba(2, 120, 200, 0)",
        legend: {
          orient: "horizontal",
          bottom: 0,
          textStyle: {
            color: "##666666",
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: data => {
            let value = "";
            this.dataList1.map((item, key) => {
              if (item.name == data) {
                value = item.value;
              }
            });
            return data + "  " + value;
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        series: [
          {
            name: "养护类型统计",
            type: "pie",
            radius: ["30%", "65%"],
            center: ["50%", "40%"],
            roseType: "radius",
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#327BDC",
                    "#8A81F9",
                    "#32D6CD",
                    "#32D17E",
                    "#FBE033",
                    "#FCAA5D"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: this.dataList1
          }
        ]
      });
    },

    drawPie2() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById("assess2"));
      // 绘制图表
      this.CarPie.setOption({
        backgroundColor: "rgba(2, 120, 200, 0)",
        title: {
          text: "I类评定情况",
          textStyle: {
            fontWeight: "bold",
            fontSize: 14,
            color: "#0ab7ff"
          },
          left: "center",
          top: "10"
        },
        tooltip: {
          show: false,
          formatter: "{a}：{d}%"
        },

        legend: {
          orient: "horizontal",
          bottom: 0,
          data: ["合格", "不合格"],
          textStyle: {
            color: "##666666",
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: data => {
            let value = "";
            this.dataList2.map((item, key) => {
              if (item.name == data) {
                value = item.value;
              }
            });
            return data + "  " + value;
          }
        },

        series: [
          {
            name: this.dataList2[0].name,
            type: "pie",
            hoverAnimation: false, //鼠标移入变大
            clockWise: false,
            center: ["50%", "52%"],
            radius: ["65%", "55%"],
            itemStyle: {
              normal: {
                color: "#8A81F9",
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100 - this.dataList2[0].value,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "rgba(3, 179, 237,0.1)"
                  }
                }
              },
              {
                value: this.dataList2[0].value,
                name: this.dataList2[0].name
              }
            ]
          },
          {
            name: this.dataList2[1].name,
            type: "pie",
            clockWise: false,
            center: ["50%", "52%"],
            hoverAnimation: false, //鼠标移入变大
            radius: ["45%", "35%"],
            itemStyle: {
              normal: {
                color: "#ffaf00",
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },

            data: [
              {
                value: 100 - this.dataList2[0].value,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "rgba(3, 179, 237,0.1)"
                  }
                }
              },
              {
                value: this.dataList2[1].value,
                name: this.dataList2[1].name
              }
            ]
          }
        ]
      });
    },

    drawPie3() {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById("assess3"));
      // 绘制图表
      let option = {
        title: {
          text: "II类-V类评定情况",
          textStyle: {
            fontWeight: "bold",
            fontSize: 14,
            color: "#0ab7ff"
          },
          left: "center",
          top: "24"
        },
        tooltip: {
          show: true,
          formatter: "{b}：{c}"
        },
        color: this.data.colors,
        // legend: {
        //       // top: "30",
        //       textStyle: {
        //         color: "##666666",
        //         fontSize: 12,
        //       },
        //       itemWidth: 12,
        //       itemHeight: 10,
        //       formatter: (data) => {
        //         return data;
        //       },
        //     },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          // max: 800,
          axisLabel: {
            color: "#929293"
          },
          axisLine: {
            lineStyle: {
              color: "#3B4E55"
            }
            // width: 5
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              // color: '#E8EBF3'
            }
          },

          data: this.data.area
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#929293"
          },
          axisLine: {
            lineStyle: {
              color: "#3B4E55"
            },
            width: 5
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#E8EBF3"
            }
          },
          data: this.data.area
        },
        series: []
      };
      for (var i = 0; i < this.data.legend.length; i++) {
        option.series.push({
          name: this.data.legend[i],
          type: "bar",
          stack: "总量",
          barWidth: "70%",
          label: {
            show: false,
            position: "insideRight"
          },
          data: this.data.data[i]
        });
      }

      this.CarPie.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
#assess1 {
  width: 275px;
  height: 170px;
}
#assess2 {
  width: 275px;
  height: 200px;
}
#assess3 {
  width: 275px;
  height: 200px;
}
.total {
  display: flex;
  justify-content: start;
  margin-top: 20px;
  p {
    color: #666666;
  }
  img {
    position: relative;
    top: -5px;
  }
  .num {
    color: #327bdc;
  }
}
.chart-type {
  margin-top: 20px;
  color: #6c6f82;
  font-size: 16px;
  img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
  }
}

.diy-header {
  background: url("../../../../assets//images/homeMap/线.png") no-repeat center;
  background-size: 95% 100%;
  width: 100%;
  height: 16px;
  margin-top: 25px;
  background-position-x: 50%;
  .title {
    font-size: 13px;
    font-weight: bold;
    color: #c6e5f6;
    position: relative;
    left: 15px;
    top: -5px;
  }
  .fTitle {
    font-weight: 400;
    color: #c6e5f6;
    display: inline-block;
    transform: scale(0.7);
    position: relative;
    left: 80px;
  }
}
</style>
